<template>
<!--我的订单-->
  <div class="orders">
      <div class="titleWrap font14">
        <p class="titleName">我的收藏</p>
        <p class="editorDeal" @click="toggle"><span v-show="edit">编辑</span><span v-show="!edit">取消</span></p>
      </div>
      <span v-if="shoucangs.length > 0">
        <CheckboxGroup v-model="ids">
          <ul class="orderOut">
            <li v-for="shoucang in shoucangs">
              <div class="orderInfo" v-if="!edit">
                <Checkbox class="checkitem" :label="shoucang.colleconId">
                <img class="orderImg" :src="shoucang.img" />
                <a href="javascript;:" class="orderName font14" @click.prevent="detail(shoucang.targetId,shoucang.targetType,shoucang.onLine)">{{shoucang.title}}</a>
                <div class="classTips">
                  <span class="classTeacher">{{shoucang.lecturerName}}</span>
                  <span v-if="shoucang.targetType == 1">{{shoucang.cataNum}}视频</span>
                  <span v-else><span></span></span>
                  <span  v-if="shoucang.price === 0">免费</span>
                  <span  v-else-if="shoucang.isVipFree === 0 && isVip > 0">免费</span>
                  <span  v-else>￥{{shoucang.price}}</span>
                </div>
                </Checkbox>
              </div>
              <div class="orderInfo" v-else style="padding-left: 220px">
                  <img class="orderImg" :src="shoucang.img" style="left: 0"/>
                  <a href="javascript;:" class="orderName" @click.prevent="detail(shoucang.targetId,shoucang.targetType,shoucang.onLine)">{{shoucang.title}}</a>
                  <div class="classTips">
                    <span class="classTeacher">{{shoucang.lecturerName}}</span>
                    <span v-if="shoucang.targetType == 1">{{shoucang.cataNum}}视频</span>
                    <span v-else><span></span></span>
                    <span  v-if="shoucang.price === 0">免费</span>
                    <span  v-else-if="shoucang.isVipFree === 0 && isVip > 0">免费</span>
                    <span  v-else>￥{{shoucang.price}}</span>
                  </div>
              </div>
            </li>
            <div class="dealBtnss" v-show="!edit">
              <span class="orderPay"   @click="handleCheckAll" v-if="checkAll">取消选择</span>
              <span class="orderPay"   @click="handleCheckAll" v-else>全选</span>
              <span class="orderConcal" @click.stop="del">删除</span>
          </div>
          </ul>
        </CheckboxGroup>
        <div class="pageout"><Page :total="total" :current="pageNumber" :page-size="size" @on-change="changePage"/></div>
      </span>
      <span v-else>
        <nodata tip="暂时还没有收藏记录哦~"></nodata>
      </span>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to thFis component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .pageout {
    text-align: center;
    margin-top: 35px;
    height: 34px;
  }
  .titleWrap {
    height: 40px;
    /*font-size: 16px;*/
    padding-bottom: 20px;
    color: #333;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
    }
    .editorDeal {
      float: right;
      color: #957960;
      line-height: 24px;
      cursor: pointer;
    }
  }
  .orderOut li {
    border-bottom: 1px solid #E1E1E1;
    padding: 20px 0;
    .classTips {
      text-align: left;
      margin-top: 60px;
      span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        color: #999;
        height: 20px;
        line-height: 20px;
        margin-right: 40px;
      }
      .classTeacher {
        padding: 0 0 0 23px;
        background: url("../../assets/usericon.png") no-repeat left center;
        background-size: 20px;
      }
    }
    .orderInfo {
      padding: 0 0 0 270px;
      position: relative;
      height: 110px;
      .orderImg {
        display: block;
        width: 200px;
        height: 110px;
        overflow: hidden;
        position: absolute;
        top: 0px;
        left: 50px;
      }
      .orderName {
        /*font-size: 16px;*/
        color: #333;
        line-height: 24px;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
        word-wrap: break-word;
        margin-top: 2px;
      }
      .orderName:hover {
        color: #957960;
      }
      .checkitem {
        display: block;
      }
    }
  }
  .dealBtnss {
    text-align: left;
    margin: 30px 0 0 0;
    float: left;
    .orderPay,.orderConcal {
      padding: 0 15px;
      min-width: 120px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
      background-color: #957960;
      cursor: pointer;
    }
    .orderConcal {
      color: #957960;
      border: 1px solid #957960;
      background-color: #fff;
      cursor: pointer;
      margin-left: 20px;
    }
  }
  .dealBtnss span {
    float: inherit;
    display: inline-block;
  }
  .orderEditor + .dealBtnss {
    display: block;
  }
</style>
<script type="text/ecmascript-6">
  import nodata from '../template/null'
  import {userColleconWeb,delColleconWeb,centreInfoWeb} from '../../http'
  import imgPathFilter from '../../myFilters'
  import {getStore} from '../../storage'
    export default {
        props: {},
        data() {
            return {
              edit:true,            //编辑状态
              total:0,
              size:6,
              pageNumber:1,
              checkAll: false,     //是否全选
              shoucangs:'',       //收藏列表
              ids:[],             //删除订单Id
              isVip:0,
              isSpinShow:false,
            };
        },
        methods: {
          //全选
          handleCheckAll () {
            if(!this.edit) {
              if (!this.checkAll) {
                //全选当前页
                for (let id in this.shoucangs) {
                  this.ids.push(this.shoucangs[id].colleconId);
                }
                this.checkAll = true;
              } else {
                this.ids = [];
                this.checkAll = false;
              }
            }
          },
          //查看收藏内容详情
          detail(id,type){
              if(type === 1) {
                this.$router.push({
                  name: 'coursedetail',
                  query: {courseId: id}
                })
              }else if(type === 2) {
                this.$router.push({
                  name: 'zhibodetail',
                  query: {liveId: id}
                })
              }else{
                  this.$router.push({
                    name:'offcoursedetail',
                    query:{courseId:id}
                  })
              }
          },
          //编辑状态转换
          toggle(){
              this.edit=!this.edit;
              this.ids = [];
              this.checkAll = false;
          },
          //批量删除收藏记录
          del(){
            if(this.ids.length>0) {
              if (this.isSpinShow === false) {
                this.isSpinShow = true;
                if (this.ids.length > 0) {
                  //用户是否登录
                  centreInfoWeb().then(res => {
                    if (res.code === 200) {
                      delColleconWeb({ids: this.ids}).then(res => {
                        if (res.code === 200) {
                          this.$Notice.success({
                            title: "个人中心提醒",
                            desc: "收藏记录删除成功",
                            duration: 3,
                          });
                          this.ids = '';
                          //获取收藏记录
                          userColleconWeb({pageNumber: this.pageNumber, pageSize: this.size, optType: 1}).then(res => {
                            if (res.code === 200) {
                              if (res.data.shoucang.rows.length <= 0 && res.data.shoucang.page > 1) {
                                this.pageNumber--;
                                userColleconWeb({
                                  pageNumber: this.pageNumber,
                                  pageSize: this.size,
                                  optType: 1
                                }).then(res => {
                                  if (res.code === 200) {
                                    this.isSpinShow = false;
                                    this.total = res.data.shoucang.total;
                                    this.shoucangs = res.data.shoucang.rows;
                                    this.isVip = res.data.isVip;
                                    this.edit = !this.edit;
                                  } else {
                                    this.isSpinShow = false;
                                    this.$Notice.warning({
                                      title: "个人中心提醒",
                                      desc: res.info,
                                      duration: 3,
                                    });
                                  }
                                }).catch()
                              } else {
                                this.isSpinShow = false;
                                this.total = res.data.shoucang.total;
                                this.shoucangs = res.data.shoucang.rows;
                                this.isVip = res.data.isVip;
                                this.edit = !this.edit;
                              }
                            } else {
                              this.isSpinShow = false;
                              this.$Notice.warning({
                                title: "个人中心提醒",
                                desc: res.info,
                                duration: 3,
                              });
                            }
                          }).catch()
                        } else {
                          this.isSpinShow = false;
                          this.$Notice.warning({
                            title: "个人中心提醒",
                            desc: res.info,
                            duration: 3,
                          });
                        }
                      }).catch()
                    } else {
                      this.isSpinShow = false;
                      this.$parent.$refs.loginInput.showModal()
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }
            }
          },
          //换页
          changePage(pageNumber){
            this.pageNumber = pageNumber;
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //用户收藏记录
                  userColleconWeb({pageNumber: this.pageNumber, pageSize: this.size, optType: 1}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.total = res.data.shoucang.total;
                      this.shoucangs = res.data.shoucang.rows;
                      this.isVip = res.data.isVip;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          getCollecon(){
            if (this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取用户收藏记录
                  userColleconWeb({pageNumber: this.pageNumber, pageSize: this.size, optType: 1}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.total = res.data.shoucang.total;
                      this.shoucangs = res.data.shoucang.rows;
                      this.isVip = res.data.isVip;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getCollecon()
        },
        components: {
          nodata
        }
    }
</script>
